<template>
    <el-card>
        <!-- 查询条件 -->
        <el-form :model="searchModel" ref="searchForm" label-width="80px" :inline="true" size="small">
            <el-form-item>
                <el-input v-model="searchModel.className" placeholder="请输入班级名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-select v-model="searchModel.collegeId" clearable placeholder="请选择学院">
                    <el-option
                    v-for="item in academyList"
                    :key="item.id"
                    :label="item.academyName"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search(pageNo,pageSize)">查询</el-button>
                <el-button icon="el-icon-refresh-right" @click="resetValue()">重置</el-button>
                <el-button type="success" icon="el-icon-plus" @click="openAddWindow()">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 数据表格 -->
        <el-table :data="tableData" border stripe style="width: 100%; margin-bottom: 20px" row-key="id">
            <el-table-column
            type="index"
            width="50">
            </el-table-column>
            <template v-for="item in tableProp">
                <el-table-column 
                :prop="item.prop"
                :label="item.label"
                :formatter="item.formatter"
                >
                </el-table-column>
            </template>
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button icon="el-icon-edit-outline" type="primary" size="small"
                    @click="handleEdit(scope.row)"
                    >编辑
                    </el-button>
                    <el-button icon="el-icon-close" type="danger" size="small" @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageNo" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 添加和编辑班级窗口 -->
        <system-dialog
        :title="classDialog.title"
        :visible="classDialog.visible"
        :width="classDialog.width"
        :height="classDialog.height"
        @onClose="onClose"
        @onConfirm="onConfirm">
            <div slot="content">
                <el-form
                :model="newclass"
                ref="newclassForm"
                :rules="rules"
                label-width="100px"
                :inline="true">
                    <el-form-item label="班级名" prop="className">
                        <el-input v-model="newclass.className"></el-input>
                    </el-form-item>
                    <el-form-item label="学院" prop="collegeId">
                        <el-select v-model="newclass.collegeId" clearable placeholder="请选择学院" @change="searchProfession()">
                            <el-option
                            v-for="item in academyList"
                            :key="item.id"
                            :label="item.academyName"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="专业" prop="professionId">
                        <el-select v-model="newclass.professionId" clearable placeholder="请选择专业">
                            <el-option
                            v-for="item in searchProfessionList"
                            :key="item.id"
                            :label="item.professionName"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="班主任" prop="classTeacherId">
                        <el-select v-model="newclass.classTeacherId" filterable clearable
                        placeholder="请选择班主任">
                            <el-option
                            v-for="item in userList"
                            :key="item.id"
                            :label="item.nickName"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    
                </el-form>
            </div>
        </system-dialog>
    </el-card>
</template>
<script>
import classApi from "@/api/class";
import userApi from "@/api/user";
import academyApi from"@/api/academy";
import professionApi from"@/api/profession";
// 引入对话框组件
import SystemDialog from "@/components/system/SystemDialog.vue";

export default {
    name: 'class',
    // 注册组件
    components:{
        SystemDialog
    },
    data() {
        return {
            tableData: [],//表格数据列表
            userList:[],
            academyList:[],
            professionList:[],
            searchProfessionParams:{academyId:null},
            searchProfessionList:[],
            searchModel:{
                className: "",
                classId:null,
                pageNo: 1,
                pageSize: 10,},
            tableProp:[
                {
                    prop:'className',
                    label:'班级',
                },{
                    prop:'collegeId',
                    label:'学院',
                    formatter: value => {
                        const findAcademy = this.academyList.find(academy => academy.id === value.collegeId)
                        return findAcademy !== undefined ? findAcademy.academyName : '-'
                    }
                },{
                    prop:'professionId',
                    label:'专业',
                    formatter: value => {
                        const findprofession = this.professionList.find(profession => profession.id === value.professionId)
                        return findprofession !== undefined ? findprofession.professionName : '-'
                    }
                },{
                    prop:'classTeacherId',
                    label:'班主任',
                    formatter: value => {
                        const findUser = this.userList.find(user => user.id === value.classTeacherId)
                        return findUser !== undefined ? findUser.nickName : '-'
                    }
                },{
                    prop:'createTime',
                    label:"创建时间"
                },{
                    prop:'updateTime',
                    label:'修改时间'
                }

            ],
            pageNo: 1, //当前页码
            pageSize: 10, //每页显示数量
            total: 0, //总数量
            // 班级窗口属性
            classDialog:{
                title:"新增班级",
                visible:false,
                width:500,
                height:250,
            },
            // 班级对象
            newclass:{
                id:null,
                className:"",
                professionId:null,
                classTeacherId:null,
                collegeId:null,
            },
            isadd:null,
            // 表单验证
            rules:{
                
                className:[{ required: true, trigger: "blur", message: "请输班级名" }],
                collegeId: [{ required: true, trigger: "change", message: "请选择所属学院"}],
                professionId:[{ required: true, trigger: "change", message: "请选择所属专业"}],
                classTeacherId:[{ required: true, trigger: "change", message: "请选择班主任"}],
            },
            loading: false,
        }
    },
    methods: {
        //获取班级列表
        async getClassList(){
            let params = {pageNo:this.pageNo,pageSize:this.pageSize}
            let res = await classApi.getClassList(params)
            if (res.success) {
                this.tableData = res.data.records
                this.total = res.data.total
            }
        },
        //获取用户列表
        async getUserList(){
            let res = await userApi.getUserAll(null)
            if (res.success) {
                this.userList = res.data
            }
        },
        //获取学院列表
        async getAcademyList(){
            let res = await academyApi.getAcademyList({pageSize:500})
            if(res.success){
                this.academyList = res.data.records
            }
        },
        //获取专业列表
        async getProfessionList(){
            let res = await professionApi.getProfessionList({pageSize:500})
            if(res.success){
                this.professionList = res.data.records
            }
        },
        //查询回调
        async search(pageNo = 1,pageSize = 10){
            this.searchModel.pageNo = pageNo
            this.searchModel.pageSize = pageSize
            let res = await classApi.getClassList(this.searchModel)
            if(res.success){
                this.tableData = res.data.records
                this.total = res.data.total
            }
        },
        //重置回调
        resetValue(){
            this.searchModel = {}
            this.getClassList()
        },
        // 打开添加班级弹窗
        openAddWindow(){
            this.$resetForm("newclassForm",this.newclass)
            this.classDialog.title = "新增班级"
            this.classDialog.visible = true
        },
        // 弹窗关闭事件
        onClose(){
            this.classDialog.visible = false
        },
        // 弹窗确认事件
        onConfirm(){
            this.$refs.newclassForm.validate(async (valid)=>{
                if(valid){
                    let res = null //后端返回的数据
                    if(this.classDialog.title == "新增班级"){
                        res = await classApi.addClass(this.newclass)
                    }else{
                        // 修改
                        res = await classApi.updateClass(this.newclass)
                    }
                    if(res.success){
                        this.$message.success(res.message)
                        this.classDialog.visible = false
                        this.getUserList()
                        this.getClassList()
                    }else{
                        this.$message.error(res.message)
                    }
                }
            })
        },
        async searchProfession(){
            this.searchProfessionParams.academyId = this.newclass.collegeId
            let res = await professionApi.getProfessionList(this.searchProfessionParams)
            if(res.success){
                this.searchProfessionList = res.data.records
            }
        },
        //修改班级
        handleEdit(row) {
            this.$objCopy(row,this.newclass)
            this.classDialog.title = "编辑班级"
            this.classDialog.visible = true
        },
        //删除班级
        async handleDelete(row) {
            let confirm = await this.$myconfirm("确定要删除该数据吗?");
            if(confirm){
                let res = await classApi.deleteClassById({ id : row.id})
                if(res.success){
                    this.$message.success(res.message)
                    this.getClassList()
                }else{
                    this.$message.error(res.message)
                }
            }
        },
        handleSizeChange(size){
            this.pageSize = size
            this.search(this.pageNo,size)
        },
        handleCurrentChange(page){
            this.pageNo = page
            this.search(page,this.pageSize)
        },
    },
    created() {
        this.getClassList()
        this.getUserList()
        this.getAcademyList()
        this.getProfessionList()
        this.searchProfession()
    }
}
</script>
<style lang="scss" scoped></style>